import React, { Component } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr:['青春再见','你好庚子','小酒馆','玉林路','成都'],
            val:'',
            checked:false
        }
    }
    render() {
        const {arr,val,checked}=this.state;
        const list=arr.map((item,i)=><li key={i}>{item}</li>)
        return (
            <>
            <button onClick={this.add}>添加</button>
            <input type="checkbox" onChange={this.checkbox}
            checked={checked}
            />
            <input type="text"
            // defaultValue={val} 获取静态值，不会改变
            value={val}
            onChange={this.change}
            
            />
            {val}
            <ul>{list}</ul>
            </>
        );
    }
    add=()=>{
        const {arr,val}=this.state;
        arr.push(val);
        this.setState({arr,val:''})
    };
    // 默认第一个参数默认是ev事件
    change=(ev)=>{
        this.setState({val:ev.target.value})
    };
    checkbox=(ev)=>{
        this.setState({checked:ev.target.checked})
    }
}
 
export default App;